<template>
	<view class="detail-container">
		<!-- 头部信息 -->
		<view class="header-section">
			<view class="title-box">
				<uni-title type="h2" title="班前报告详情"></uni-title>
				<view class="subtitle">查看完整的班前报告内容</view>
			</view>
		</view>

		<!-- 报告信息卡片 -->
		<view class="report-card" v-if="reportData">
			<view class="report-header">
				<view class="employee-info">
					<text class="employee-name">报告人：{{ reportData.userName }}</text>
					<text class="report-date">日期：{{ reportData.aa }}</text>
				</view>
			</view>

			<!-- 报告内容 -->
			<view class="report-content">
				<view v-if="reportData.bb" class="content-section">
					<view class="section-title">报告内容</view>
					<view class="content-text">
						<text>{{ reportData.bb }}</text>
					</view>
				</view>
				<view v-else class="empty-content">
					<uni-icons type="info" size="24" color="#909399"></uni-icons>
					<text>暂无报告内容</text>
				</view>
			</view>

			<!-- 部门详细内容 -->
			<view class="department-sections" v-if="parsedContent">
				<view class="department-item" v-if="parsedContent.floor">
					<view class="dept-title">楼面部</view>
					<view class="dept-content">{{ parsedContent.floor }}</view>
				</view>
				<view class="department-item" v-if="parsedContent.business">
					<view class="dept-title">业务部</view>
					<view class="dept-content">{{ parsedContent.business }}</view>
				</view>
				<view class="department-item" v-if="parsedContent.dj">
					<view class="dept-title">DJ部</view>
					<view class="dept-content">{{ parsedContent.dj }}</view>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view v-else class="loading">
			<uni-icons type="spinner-cycle" size="24" color="#409EFF"></uni-icons>
			<text>加载中...</text>
		</view>

		<!-- 返回按钮 -->
		<view class="action-section">
			<button class="back-btn" @click="goBack">返回</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			reportData: null,
			parsedContent: null
		}
	},
	onLoad(options) {
		// 接收传递的报告数据
		if (options.reportData) {
			try {
				this.reportData = JSON.parse(decodeURIComponent(options.reportData))
				this.parseReportContent()
			} catch (error) {
				console.error('解析报告数据失败:', error)
				uni.showToast({
					title: '数据解析失败',
					icon: 'none'
				})
			}
		}
	},
	methods: {
		// 解析报告内容
		parseReportContent() {
			if (!this.reportData || !this.reportData.bb) {
				this.parsedContent = null
				return
			}

			const content = this.reportData.bb
			// 尝试匹配各个部门的内容
			const floorMatch = content.match(/楼面部：([\s\S]*?)(?=业务部：|DJ部：|$)/)
			const businessMatch = content.match(/业务部：([\s\S]*?)(?=DJ部：|$)/)
			const djMatch = content.match(/DJ部：([\s\S]*?)$/)

			this.parsedContent = {
				floor: floorMatch ? floorMatch[1].trim() : null,
				business: businessMatch ? businessMatch[1].trim() : null,
				dj: djMatch ? djMatch[1].trim() : null
			}
		},
		// 返回上一页
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f7fa;
}

.detail-container {
	padding: 30rpx;
	min-height: 100vh;
}

.header-section {
	margin-bottom: 40rpx;
	
	.title-box {
		text-align: center;
		padding: 20rpx 0;
		
		.subtitle {
			color: #909399;
			font-size: 28rpx;
			margin-top: 10rpx;
		}
	}
}

.report-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.report-header {
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.employee-info {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		
		.employee-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.report-date {
			font-size: 28rpx;
			color: #666;
		}
	}
}

.report-content {
	margin-bottom: 30rpx;
	
	.content-section {
		.section-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.content-text {
			background: #f8f9fa;
			padding: 20rpx;
			border-radius: 8rpx;
			border-left: 4rpx solid #409EFF;
			
			text {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				white-space: pre-wrap;
			}
		}
	}
	
	.empty-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 20rpx;
		color: #909399;
		font-size: 28rpx;
		gap: 20rpx;
	}
}

.department-sections {
	.department-item {
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 8rpx;
		
		.dept-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #409EFF;
			margin-bottom: 15rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #e0e0e0;
		}
		
		.dept-content {
			font-size: 28rpx;
			color: #333;
			line-height: 1.6;
			white-space: pre-wrap;
		}
	}
}

.loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 20rpx;
	gap: 20rpx;
	color: #409EFF;
	font-size: 28rpx;
}

.action-section {
	display: flex;
	justify-content: center;
	margin-top: 40rpx;
	
	.back-btn {
		background: #409EFF;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 20rpx 60rpx;
		font-size: 28rpx;
		transition: background 0.2s;
		
		&:active {
			background: #3a8ee6;
		}
	}
}
</style>
